import styled from 'styled-components'
import yinji from '@/assets/imgs/activity/yinji-box.png'
import huodonh from '@/assets/imgs/activity/huodonh-box.png'
import {formatTimestamp, getImageUrl, parseTimeData} from '../../../utils/utils.js'
import {TypeBox} from '../../home/components/index.jsx'
import React from 'react'
// 活动热榜
const ActiveHotListBox = styled.div`
    width: 591px;
    height: 526px;
    background-image: url(${yinji});
    background-size: 100% 100%;
    position: relative;

    .title-box {
        display: flex;
        align-items: center;
        position: absolute;
        top: 9px;
        left: 59px;

        .icon {
            width: 30px;
            height: 30px;
        }

        .title {
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            line-height: 26px;
            letter-spacing: 0.6px;
            margin-left: 10px;
        }
    }

    .list {
        box-sizing: border-box;
        padding: 0 26px;
        position: absolute;
        top: 69px;

        .list-item {
            width: 539px;
            height: 131px;
            background: #FFF;
            border: 1px solid #FFD7AF;
            border-radius: 6px;
            box-sizing: border-box;
            margin-bottom: 18px;
            display: flex;

            &:nth-last-child(1) {
                margin-bottom: 0;
            }

            .cover-box {
                width: 199px;
                height: 129px;
                position: relative;

                .cover {
                    width: 199px;
                    height: 129px;
                }

                .time {
                    width: 199px;
                    height: 40px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    box-sizing: border-box;
                    padding: 20px 3px 4px 3px;
                    background: linear-gradient(360deg, #000 -20.93%, #66666600 97.48%);
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    //letter-spacing: 0.34px;

                }
            }

            .right-box {
                flex: 1;
                box-sizing: border-box;
                padding: 10px 16px;

                .name-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;

                    .icon {
                        width: 30px;
                    }

                    .name {
                        margin-left: 8px;
                        color: #1c1c1c;
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 22px;
                    }
                }

                .label-box {
                    display: flex;
                    margin-top: 15px;
                }

                .press-box {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 8px;
                    align-items: center;

                    .press {
                        max-width: 171px;
                        width: fit-content;
                        box-sizing: border-box;
                        padding: 0 10px;
                        height: 22px;
                        line-height: 22px;
                        border-radius: 2px;
                        background: #FFD7AF;
                        color: #7a4f23;
                        font-size: 14px;
                        font-weight: 400;
                    }

                    .press-view {
                        display: flex;
                        color: #545454;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 19px;
                    }
                }
            }
        }
    }

`

export function ActiveHotList({list = []}) {
  function iconStyle(rank) {
    switch (rank) {
      case 1:
        return {
          url: getImageUrl('activity/one.png'),
          style: {
            width: '19px',
            height: '38px'
          }
        }
      case 2:
        return {
          url: getImageUrl('activity/two.png'),
          style: {
            width: '30px',
            height: '37px'
          }
        }
      case 3:
        return {
          url: getImageUrl('activity/three.png'),
          style: {
            width: '30px',
            height: '42px'
          }
        }
    }
  }

  const colorMap = {
    1: '#f77629',
    2: '#006647',
    3: '#666'
  }
  return (<>
    <ActiveHotListBox>
      <div className={'title-box'}>
        <img src={getImageUrl('activity/barani.png')} alt="" className={'icon'}/>
        <div className={'title'}>活动热榜</div>
      </div>
      <div className={'list'}>
        {
          list.map((item, index) => {
            return (<div className={'list-item hover-box'} key={index}>
              <div className={'cover-box'}>
                <img src={item.cover_image} alt="" className={'cover'}/>
                <div className={'time'}>{item.period}</div>
              </div>
              <div className={'right-box'}>
                <div className={'name-box'}>
                  <img src={iconStyle(item.ranking).url} alt="" className={'icon'}
                       style={iconStyle(item.ranking).style}/>
                  <div className={'u-line-2 name hover-text'}>{item.activity_name}</div>
                </div>
                <div className={'label-box'}>
                  <TypeBox color={colorMap[item?.status]} style={{marginRight: '6px'}}>{item.status_str}</TypeBox>
                  <TypeBox>{item.press.press_name}</TypeBox>
                </div>
                <div className={'press-box'}>
                  <div className={'press'}>{item.press.press_name}</div>
                  <div className={'press-view'}>
                    <img src={getImageUrl('activity/huo-icon.png')} alt={''}
                         style={{width: '18px', height: '16px', marginRight: '8px'}}/>{item.views}</div>
                </div>
              </div>
            </div>)
          })
        }

      </div>
    </ActiveHotListBox>
  </>)
}

// 活动印象
const ActivityImprintsBox = styled.div`
    width: 591px;
    height: 526px;
    background-image: url(${huodonh});
    background-size: 100% 100%;
    position: relative;

    .title-box {
        display: flex;
        align-items: center;
        position: absolute;
        top: 9px;
        left: 29px;

        .icon {
            width: 30px;
            height: 30px;
        }

        .title {
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            line-height: 26px;
            letter-spacing: 0.6px;
            margin-left: 10px;
        }
    }

    .imprint-box {
        position: absolute;
        top: 71px;
        box-sizing: border-box;
        padding: 0 10px;
        display: grid;
        grid-template-columns: repeat(2, 280px);
        gap: 28px 11px;

        .imprint-item {
            width: 280px;
            height: 124px;
            border-radius: 6px;
            background: #F6F6F6;
            box-sizing: border-box;
            display: flex;
            padding: 19px 18px 19px 19px;

            .cover {
                width: 86px;
                height: 86px;
                margin-right: 10px;
            }

            .info-box {
                .title {
                    color: #1c1c1c;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 21px;
                }

                .activity-num {
                    color: #666666;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 18px;
                    margin-top: 14px;
                }

                .views {
                    width: fit-content;
                    height: 22px;
                    box-sizing: border-box;
                    padding: 0 10px;
                    border-radius: 2px;
                    background: #FFD7AF;
                    color: #7a4f23;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 22px;
                    margin-top: 11px;
                }
            }
        }
    }

`

export function ActivityImprints({list = []}) {
  return (<>
    <ActivityImprintsBox>
      <div className={'title-box'}>
        <img src={getImageUrl('activity/barani.png')} alt="" className={'icon'}/>
        <div className={'title'}>报刊社-活动印记</div>
      </div>
      <div className={'imprint-box'}>
        {
          list.map((item, index) => {
            return (<div className={'imprint-item'} key={index}>
              <img src={item.logo_url} alt="" className={'cover'}/>
              <div className={'info-box'}>
                <div className={'title u-line-1'}>{item.press_name}</div>
                <div className={'activity-num u-line-1'}>已举办{item.activity_count}场活动</div>
                <div className={'views u-line-1'}>传播力：{item.activity_views}</div>
              </div>
            </div>)
          })
        }

      </div>
    </ActivityImprintsBox>
  </>)
}

//奖励优选榜

const RewardThePreferredItemBox = styled.div`
    width: 590px;
    height: 226px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 0 6px 0 #00000026;
    box-sizing: border-box;
    padding: 20px;
    display: flex;

    .cover-box {
        width: 280px;
        height: 186px;
        border-radius: 4px;
        position: relative;
        margin-right: 12px;

        .cover {
            width: 280px;
            height: 186px;
            border-radius: 4px;
        }

        .views {
            width: 280px;
            height: 40px;
            background: linear-gradient(360deg, #000 -20.93%, #66666600 97.48%);
            position: absolute;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding: 18px 0px 8px 8px;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;

            img {
                width: 16px;
                height: 12px;
                margin-right: 6px;
            }
        }
    }

    .info-box {
        .title {
            max-width: 258px;
            color: #1c1c1c;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
        }

        .status-box {
            display: flex;
            margin-top: 16px;
            align-items: center;
            margin-bottom: 10px;

            .time {
                color: #666666;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                margin-left: 14px;
            }

            .time-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 160px;
                margin-left: 14px;

                .time-item {
                    width: 23px;
                    height: 23px;
                    border-radius: 2px;
                    background: linear-gradient(178deg, #f6892c -17.43%, #f72f1b 111.11%);

                    color: #ffffff;
                    font-size: 16px;
                    font-weight: 700;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .unit-box {
                    color: #1c1c1c;
                    font-size: 14px;
                }
            }
        }

        .press-box {
            width: fit-content;
            max-width: 258px;
            box-sizing: border-box;
            padding: 0 10px;
            height: 22px;
            flex-shrink: 0;
            border-radius: 2px;
            line-height: 22px;
            color: #7a4f23;
            font-size: 14px;
            font-weight: 400;
            background: #FFD7AF;
            margin-top: 10px;
        }

        .review-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            .bg1 {
                width: 100px;
                height: 30px;
                border-radius: 15px;
                background: #F68C2B;
                color: #ffffff;
                font-size: 14px;
                font-weight: 400;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .bg2 {
                width: 100px;
                height: 30px;
                border-radius: 15px;
                background: linear-gradient(90deg, #DD2F3A -29%, #FDA726 130.5%);
                color: #ffffff;
                font-size: 14px;
                font-weight: 400;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .reward-box {
                display: flex;
                align-items: center;
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;
            }
        }


    }

`

export function RewardThePreferredItem({detail}) {
  const nowTime = new Date().getTime();
  const {
    days,
    hours,
    minutes
  } = parseTimeData(detail?.status === 1 ? (detail?.start_time * 1000) - nowTime : (detail?.end_time * 1000) - nowTime)
  const rewardMap = {
    1: getImageUrl('activity/hongbao.png'),
    2: getImageUrl('activity/shiwu.png'),
    3: getImageUrl('activity/zhengshu.png'),
    4: getImageUrl('activity/shiwu.png')
  }
  const statusMap = {
    1: {
      text: '敬请期待',
      class: 'bg1'
    },
    2: {
      text: '立即参加',
      class: 'bg2'
    },
    3: {
      text: '活动回顾',
      class: 'bg1'
    }
  }
  const colorMap = {
    1: '#f77629',
    2: '#006647',
    3: '#666'
  }
  return (<>
    <RewardThePreferredItemBox className={'hover-box'}>
      <div className={'cover-box'}>
        {detail?.tag_name && <MTag style={{position: 'absolute', right: '10px', top: '-4px'}}>{detail?.tag_name}</MTag>}

        <img className={'cover'} alt="" src={detail.cover_image}/>
        <div className={'views'}>
          <img src={getImageUrl('eyes.png')} alt=""/>
          {detail?.views}
        </div>
      </div>
      <div className={'info-box'}>
        <div className={'title u-line-2 hover-text'}>{detail?.activity_name}</div>
        <div className={'status-box'}>
          <TypeBox color={colorMap[detail?.status]}>{detail?.status_str}</TypeBox>
          {
            detail?.status !== 3 ? <div className={'time-box'}>
              <div className={'time-item'}>{days}</div>
              <div className="unit-box">天</div>
              <div className={'time-item'}>{hours}</div>
              <div className="unit-box">时</div>
              <div className={'time-item'}>{minutes}</div>
              <div className="unit-box">分钟</div>
            </div> : <div className={'time'}>活动结束时间:{formatTimestamp(detail?.end_time, 'yyyy年MM月dd日')}</div>
          }
        </div>
        <TypeBox color={'#666666'}>{detail?.category_name}</TypeBox>
        <div className={'press-box'}>{detail?.press.press_name}</div>
        <div className={'review-box'}>
          <div className={`review ${statusMap[detail?.status].class}`}>{statusMap[detail?.status].text}</div>
          <div className={'reward-box'}>
            <img src={rewardMap[detail?.reward_type]} alt="" className={'reward'}/>
            {detail?.reward_type_str}
          </div>
        </div>
      </div>
    </RewardThePreferredItemBox>
  </>)
}

const MTag = styled.div`
    width: 82px;
    height: 28px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #F77629 0%, #F73D1E 139.47%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
`